import React, { Component, Fragment } from 'react'
import { Row, Col, Card, Progress, Statistic } from 'antd'
import { HddOutlined } from '@ant-design/icons'
import { FormattedMessage } from 'react-intl'
import { byteFroamt } from './common.js'
import './App.css'

export default class DiskState extends Component {

    getPercentByName = (name) => {
        let total = this.props.disk[name]['total']
        let free = this.props.disk[name]['free']
        let percent = Math.floor((total - free) / total * 100) / 100

        return percent
    }

    getColorByName = (name) => {
        let pd = this.getPercentByName(name) * 100
        let color = (pd < 50) ? "#52c41a" :
            ((pd < 75) ? "#1890ff" :
                ((pd < 90) ? "#faad14" : "#ff4d4f"))
        return color
    }

    render() {
        return (
            <Fragment>

                <Row>
                    <Card.Meta className="stateCard"
                        avatar={<HddOutlined />}
                        title={<FormattedMessage id="Storage" />}
                    />
                    {
                        Object.keys(this.props.disk).map((item, i) => (
                            <Col xs={24} sm={24} md={24} lg={12} key={'disk' + item + i}>

                                <Card className="stateCard" title={item}>
                                    <Progress
                                        percent={this.getPercentByName(item) * 100}
                                        strokeColor={this.getColorByName(item)}
                                    />

                                    <Row span={16}>
                                        <Col span={12}>
                                            <Statistic
                                                title={<FormattedMessage id="Total" />}
                                                value={byteFroamt(this.props.disk[item]["total"])}
                                            />
                                        </Col>
                                        <Col span={12}>
                                            <Statistic
                                                title={<FormattedMessage id="Used" />}
                                                value={byteFroamt(this.props.disk[item]["total"] - this.props.disk[item]["free"])}
                                            />
                                        </Col>
                                    </Row>

                                </Card>
                            </Col>
                        ))
                    }
                </Row>
            </Fragment>

        )
    }
}
